<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="800px"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :append-to-body="true"
    :destroy-on-close="true"
    :before-close="handleClose"
  >
    <el-form ref="markEdit" :model="markLine" :rules="rules" label-width="150px">
      <el-form-item label="选择指标" prop="ColumnId">
        <el-select v-model="markLine.ColumnId" placeholder="选择指标">
          <el-option v-for="col in columns" :key="col.Id" :label="col.Name" :value="col.Id" />
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="ValueType">
        <enumItem
          :value="markLine.ValueType"
          :dic-key="EnumDic.ChartMarkLineValType"
          placeholder="类型"
          sys-head="form"
        />
      </el-form-item>
      <template v-if="markLine.ValueType != 0">
        <el-form-item label="线颜色" prop="Color">
          <el-color-picker v-model="markLine.Color" />
        </el-form-item>
        <el-form-item label="辅助线名称" prop="Label">
          <el-input v-model="markLine.Label" placeholder="辅助线名称" />
        </el-form-item>
      </template>
      <el-form-item v-else label="固定值" prop="Value">
        <el-row v-for="(item, index) in markLine.Value" :key="index" :gutter="24">
          <el-col :span="8">
            <el-form-item
              :prop="'Value.'+index+'.Value'"
              :rules="[{
                required: true,
                message: '值不能为空！',
                trigger: 'blur'
              }]"
            >
              <el-input-number v-model="item.Value" placeholder="数值" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :prop="'Value.'+index+'.Label'"
              :rules="[{
                required: true,
                message: '辅助线名称不能为空！',
                trigger: 'blur'
              }]"
            >
              <el-input v-model="item.Label" placeholder="辅助线名称" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-color-picker v-model="item.Color" />
          </el-col>
          <el-col :span="3">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              @click="drop(index)"
            />
          </el-col>
        </el-row>
        <el-button
          style="margin-bottom: 10px; margin-top: 10px;"
          icon="el-icon-plus"
          @click="add"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { EnumDic } from '@/customForm/config/formConfig'
export default {
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    mark: {
      type: Object,
      default: null
    },
    markIndex: {
      type: Number,
      default: null
    },
    columns: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      EnumDic,
      markLine: {},
      title: '添加辅助线',
      rules: {
        ValueType: [
          {
            required: true,
            message: '辅助线不能为空！',
            trigger: 'blur'
          }
        ],
        Label: [
          {
            required: true,
            message: '辅助线名称不能为空！',
            trigger: 'blur'
          }
        ],
        Value: [
          {
            required: true,
            message: '值不能为空！',
            trigger: 'blur'
          }
        ],
        ColumnId: [
          {
            required: true,
            message: '指标不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() { },
  methods: {
    reset() {
      this.markLine = this.mark == null ? {
        Label: null,
        ValueType: 0,
        ColumnId: null,
        Value: [],
        Color: null
      } : JSON.parse(JSON.stringify(this.mark))
      if (this.markLine.Value == null) {
        this.markLine.Value = []
      }
      console.log(this.markLine)
    },
    handleClose() {
      this.$emit('update:visible', false)
    },
    add() {
      this.markLine.Value.push({
        Label: null,
        Value: null,
        Color: null
      })
    },
    drop(index) {
      this.markLine.Value.splice(index, 1)
    },
    save() {
      this.$refs['markEdit'].validate((valid) => {
        if (valid) {
          this.$emit('update:visible', false)
          if (this.markLine.ValueType !== 0) {
            delete this.markLine.Value
          } else {
            this.markLine.Label = this.markLine.Value.map(a => a.Label).join(',')
          }
          this.$emit('save', this.markIndex, this.markLine)
        } else {
          return false
        }
      })
    }
  }
}
</script>

